<template>
  <div>
    <label class="radio-label" style="padding-left:0;">文件名: </label>
    <el-input v-model="filename" placeholder="请输入导出文件名称(default excel-list)" style="width: 350px;" prefix-icon="el-icon-document"/>
    <label class="radio-label">自动填充表头:</label>
    <el-radio-group v-model="autoWidth">
      <el-radio :label="true" border>
        True
      </el-radio>
      <el-radio :label="false" border>
        False
      </el-radio>
    </el-radio-group>
    <label class="radio-label">文件类型: </label>
    <el-select v-model="bookType" style="width:120px;">
      <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
      />
    </el-select>
    <el-button type="primary" icon="el-icon-download" @click="handleDownload">
      Export
    </el-button>
    <label class="radio-label" style="padding-center:0;"></label>
    <el-input v-model="listQuery.id" placeholder="团队id" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
    <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
      Search
    </el-button>
  </div>
  <el-table
      :data="tableData"
      border
      style="width: 100%"
  >
    <el-table-column
        prop="id"
        label="团队id"
        width="310"
    />
    <el-table-column
        prop="name"
        label="项目名称"
        width="310"
    />
    <el-table-column
        prop="username"
        label="团队成员姓名"
        width="310"
    />
    <el-table-column
        prop="userId"
        label="团队成员id"
        width="345"
    />
  </el-table>
</template>

<script>
import http from "../../utils/req";

export default {
  data() {
    return {
      options: ['xlsx', 'csv', 'txt'],
      tableData: [{
        id: '',
        name: '',
        username: '',
        userId:'',
      }],
      listQuery: {
        id: '',
        name: '',
        username: '',
        userId:'',
      },
      downloadLoading: false,
      filename: '',
      autoWidth: true,
      bookType: 'xlsx'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(){
      http.get('/ProjectMember/findAllProjectMember', {params: this.listQuery}).then((value => {
        this.tableData = value.data
      }))
    },
    handleFilter() {
      this.getData()
    },
    handleDownload() {
      this.downloadLoading = true
      import('../../utils/Export2Excel').then(excel => {
        const tHeader = ['团队id', '项目名称', '团队成员姓名', '团队成员id']
        const filterVal = ['id', 'name', 'username', 'userId']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.tableData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>

<style>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
</style>
